<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>
    <!--element日期所需-->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
</head>
<body class="hold-transition">
<!--日期控件-->
<div id="date">
    <template>
        <div class="block">
            <br><span>请选择日期区间</span>
            <el-date-picker
                    unlink-panels="true"
                    v-model="value"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                    @blur="findData()">
            </el-date-picker>
        </div>
    </template>
</div>


<div id="app">
    <div class="content-header">
        <h1>后台数据统计(一)</h1>
    </div>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:600px;"></div>
        </div>
    </div>
</div>
</body>

<script src="../js/axios-0.18.0.js"></script>
<script>        var vue = new Vue({
    el: "#date",
    data: {                value: ''            },            created() {                  var date1 = new Date(),                      end = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();                  var date2 = new Date(date1);                date2.setDate(date1.getDate() - 7);                  var begin = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();                  this.sendAndGet(begin,end)            },                methods: {                findData() {                    var beginDate = this.value[0];                      var begin = beginDate.getFullYear() + "-" + (beginDate.getMonth() + 1) + "-" + beginDate.getDate();                    var endDate = this.value[1];                      var end = endDate.getFullYear() + "-" + (endDate.getMonth() + 1) + "-" + endDate.getDate();                    this.sendAndGet(begin,end)                },                sendAndGet(begin,end) {                                            var myChart = echarts.init(document.getElementById('chart1'));                                                                axios.get("/report/getOrderAndVisit?begin=" + begin + "&end=" + end).then((res) => {                        if (res.data.flag) {                            myChart.setOption(                                {                                    title: {                                        text: '后台运营数据统计'                                    },                                    tooltip: {                                        trigger: 'axis'                                    },                                    legend: {                                        data: ['每日预约数', '每日到诊数']                                    },                                    grid: {                                        left: '3%',                                        right: '4%',                                        bottom: '3%',                                        containLabel: true                                    },                                    toolbox: {                                        feature: {                                            saveAsImage: {}                                        }                                    },                                    xAxis: {                                        type: 'category',                                        boundaryGap: false,                                        data: res.data.data.days                                    },                                    yAxis: {                                        type: 'value'                                    },                                    series: [                                        {                                            name: '每日预约数',                                            type: 'line',                                            stack: '',                                            data: res.data.data.orderCount                                        },                                        {                                            name: '每日到诊数',                                            type: 'line',                                            stack: '',                                            data: res.data.data.visitCount                                        }                                    ]                                });                        }else {                            this.$message.error("当前日期范围内无订单")                        }                    });                }            }        })    </script>

</html>
